<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-06-10 15:02:14
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-06 11:10:39
 * @FilePath: /anxinxiu/src/components/serve/serveListItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="serve_wrapper">
    <div class="serve_text_1">
      <div class="title">{{ item.storeName }}</div>
      <!-- <div class="num_plate">车牌：浙E·G875B</div> -->
    </div>
    <div class="serve_item">{{ item.orderItems[0].goodsName }}</div>
    <div class="btn">
      <div class="btn_1" @click="goDetail">服务报告</div>
      <div v-if="!disabled" class="btn_2" @click="goVideo">维修过程</div>
      <!-- <div class="btn_2">评价</div> -->
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "serveListitem",
  components: {},
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      disabled: true,
      cameraInfo: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    goDetail() {
      this.$router.push({
        path: "/orderDetail",
        query: {
          orderSn: this.item.sn,
        },
      });
    },
    async goVideo() {
      let res = await api.getCamreaDetail({
        deviceSerial: this.cameraInfo.deviceSerial,
      });
      this.$router.push({
        path: "/audio",
        query: {
          accessToken: res.accessToken,
          url: res.url,
          storeName: this.item.storeName,
        },
      });
    },
    async getCameraList() {
      let res = await api.getCameraList({
        storeId: this.item.storeId,
      });
      if (res.length != 0) {
        this.disabled = false;
        this.cameraInfo = res[0];
      }
    },
  },
  created() {},
  mounted() {
    this.getCameraList();
  },
};
</script>
<style lang="less" scoped>
.serve_wrapper {
  width: 100%;
  padding: 55px 70px;
  background: #f5f8ff;
  border-radius: 20px;
  border: 3px solid #c2d0fe;
  margin-bottom: 25px;
  .serve_text_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    .title {
      font-size: 46px;
      font-weight: bold;
    }
    .num_plate {
      font-size: 46px;
      color: #1758fb;
    }
  }
  .serve_item {
    font-size: 38px;
    color: #666666;
    margin-bottom: 20px;
  }
  .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &_1,
    &_2 {
      font-size: 46px;
      color: #fff;
      border-radius: 999px;
    }
    &_1 {
      background: linear-gradient(to right, #015fea, #00bffa);
      margin-right: 20px;
      padding: 15px 60px;
    }
    &_2 {
      background: linear-gradient(to right, #f28c42, #ffb21d);
      padding: 15px 80px;
    }
  }
}
</style>
